<template>
<div id="aCoursesList" class="bg-fa of">
<!-- /课程列表 开始 -->
<section class="container">
<header class="comm-title">
<h2 class="fl tac">
<span class="c-333">全部课程</span>
</h2>
</header>
<section class="c-sort-box">
<section class="c-s-dl">
<dl>
<dt>
<span class="c-999 fsize14">课程类别</span>
</dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li>
<a title="全部" href="#" @click="getAll" :class="{active: oneIndex == -1}">全部</a>
</li>
<li v-for="(item, index) in subjectNestedList" :key="index" :class="{active: oneIndex == index}">
<a :title="item.title" href="#" @click="searchOne(item.id, index)">{{item.title}}</a>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>
<span class="c-999 fsize14"></span>
</dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li v-for="(item, index) in subSubjectList" :key="index" :class="{active: twoIndex == index}">
<a :title="item.title" href="#" @click="searchTwo(item.id, index)">{{item.title}}</a>
</li>
</ul>
</dd>
</dl>
<div class="clear"></div>
</section>
<div class="js-wrap">
<section class="fr">
<span class="c-ccc">
<i class="c-master f-fM">1</i>/
<i class="c-666 f-fM">1</i>
</span>
</section>
<section class="fl">
<ol class="js-tap clearfix">
<li :class="{'current bg-orange': buyCountSort != ''}">
<a title="关注度" href="#" @click="searchBuyCount">关注度&nbsp;
<span :class="{hide: buyCountSort == ''}">↓</span>
</a>
</li>
<li :class="{'current bg-orange': gmtCreateSort != ''}">
<a title="最新" href="#" @click="searchGmtCreateSort">最新&nbsp;
<span :class="{hide: gmtCreateSort == ''}">↓</span>
</a>
</li>
<li :class="{'current bg-orange': priceSort != ''}">
<a title="价格" href="#" @click="searchPriceSort">价格&nbsp;
<span :class="{hide: priceSort == ''}">↓</span>
</a>
</li>
</ol>
</section>
</div>
<div class="mt40">
<!-- /无数据提示 开始-->
<section class="no-data-wrap" v-if="data.total == 0">
<em class="icon30 no-data-ico">&nbsp;</em>
<span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理
中...</span>
</section>
<!-- /无数据提示 结束-->
<article class="comm-course-list" v-else>
<ul class="of" id="bna">
<li v-for="item in data.items" :key="item.id">
<div class="cc-l-wrap">
<section class="course-img">
<img :src="item.cover"
class="img-responsive" :alt="item.title">
<div class="cc-mask">
<a :href="'/course/' + item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a :href="'/course/' + item.id" :title="item.title" class="course-title
fsize18 c-333">{{item.title}}</a>
</h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">{{Number(item.price) === 0 ? '免费' : item.price + '￥' }}</i>
</span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">{{item.viewCount}}人学习</i>
 |
<i class="c-999 f-fA">{{item.viewCount * 2}}评论</i>
</span>
</section>
</div>
</li>
</ul>
<div class="clear"></div>
</article>
</div>
<!-- 公共分页 开始 -->
<!-- 公共分页 开始 -->
<div>
<div class="paging">
<!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
<a :class="{undisable: !data.hasPrevious}" href="#" title="首页" @click.prevent="gotoPage(1)">首</a>
<a v-if="data.hasPrevious" href="#" title="前一页" @click.prevent="gotoPage(data.current-1)">&lt;</a>
<a v-for="page in data.pages" :key="page"
  :class="{current: data.current == page, undisable: data.current == page}"
  :title="'第'+page+'页'" href="#" @click.prevent="gotoPage(page)">{{ page }}
</a>
<a v-if="data.hasNext" href="#" title="后一页" @click.prevent="gotoPage(data.current+1)">&gt;</a>
<a :class="{undisable: !data.hasNext}" href="#" title="末页" @click.prevent="gotoPage(data.pages)">末</a>
<div class="clear"/>
</div>
</div>
<!-- 公共分页 结束 -->
</section>
</section>
<!-- /课程列表 结束 -->
</div>
</template>
<script>
import courseApi from '@/api/course.js'
export default {
	data(){
		return{
			page:1,		//当前页
			data:{},	//课程分页详情列表
			subjectNestedList: [], // 一级分类列表
			subSubjectList: [], // 二级分类列表
			searchObj: {}, // 查询表单对象
			oneIndex:-1,	//一级分类的标识
			twoIndex:-1,	//二级分类的标识
			buyCountSort:"",
			gmtCreateSort:"",
			priceSort:""
		}
	},
	created(){
		//1、查询第一页的方法
		this.initCourseFirst();
		//2、以及分类的显示
		this.initSubject();
	},
	methods:{
		//查询第一页的课程信息
		initCourseFirst(){
			courseApi.getCourseList(1, 8, this.searchObj)
				.then(res => {
					this.data = res.data.data;
				})
		},
		//查询所有的分类
		initSubject(){
			courseApi.getAllSubject()
				.then(res => {
					this.subjectNestedList = res.data.data.list;
				});
		},
		//分页切换的方法
		gotoPage(page){
			courseApi.getCourseList(page, 8, this.searchObj)
				.then(res => {
					this.data = res.data.data;
				})
		},
    //查询全部课程
    getAll(){
      this.oneIndex = -1;
      this.searchObj = {};
      this.gotoPage(1);

      //避免出错，把所有的二级清空
      this.twoIndex = -1;
      this.subjectId = '';
      this.subSubjectList = '';
      this.buyCountSort = '';
      this.gmtCreateSort = '';
      this.priceSort = '';
    },
    //根据一级分类，查询对应的二级分类
    searchOne(subjectParentId, index){
      //把传递index值赋值给oneIndex，为了active样式
      this.oneIndex = index;
      //避免出错，把所有的二级清空
      this.twoIndex = -1;
      this.subjectId = '';
      this.subSubjectList = '';
      this.buyCountSort = '';
      this.gmtCreateSort = '';
      this.priceSort = '';
      //根据一级分类查询课程
      this.searchObj.subjectParentId = subjectParentId;
      this.gotoPage(1);

      //let subjectOne = this.subjectNestedList.filter(parent => parent.id === subjectParentId);
      //this.subSubjectList = subjectOne.children;
      for(let oneSubject of this.subjectNestedList){
        if(subjectParentId == oneSubject.id){
          this.subSubjectList = oneSubject.children;
        }
      }
    },
    //二级分类查询课程
    searchTwo(subjectId, index){
      //用index改变样式
      this.twoIndex = index;

      //根据二级分类查询课程
      this.searchObj.subjectId = subjectId;
      this.gotoPage(1);
      this.buyCountSort = '';
      this.gmtCreateSort = '';
      this.priceSort = '';
    },
    //根据销量进行排序
    searchBuyCount(){
      this.buyCountSort = '1';
      this.gmtCreateSort = '';
      this.priceSort = '';
      this.searchObj.buyCountSort = this.buyCountSort;
      this.searchObj.gmtCreateSort = this.gmtCreateSort;
      this.searchObj.priceSort = this.priceSort;
      this.gotoPage(1);
    },
    searchGmtCreateSort(){
      this.buyCountSort = '';
      this.gmtCreateSort = '1';
      this.priceSort = '';
      this.searchObj.buyCountSort = this.buyCountSort;
      this.searchObj.gmtCreateSort = this.gmtCreateSort;
      this.searchObj.priceSort = this.priceSort;
      this.gotoPage(1);
    },
    searchPriceSort(){
      this.buyCountSort = '';
      this.gmtCreateSort = '';
      this.priceSort = '1';
      this.searchObj.buyCountSort = this.buyCountSort;
      this.searchObj.gmtCreateSort = this.gmtCreateSort;
      this.searchObj.priceSort = this.priceSort;
      this.gotoPage(1);
    }
	}
};
</script>
<style scoped>
  .active {
    background: #bdbdbd;
  }
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
</style>
